<template>
  <div class="ms-list" ref="msList">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="color: #0088cc" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>问卷调查new</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <ms-slide
      :width="500"
      ref="slidePreviewQuestionnaire">
      <div class="preview-box">
        <div class="preview-main">
          <div class="preview-bg">
            <img :src="previewImg" alt="">
          </div>
          <div class="exist">
            <header>
              <div class="title">
                {{ questionTitle }}
              </div>
            </header>
            <div class="content">
              <p class="explain">说明：</p>
              <div class="container explain-centent">{{ questionExplain }}</div>
              <div class="container">
                <p class="text-box">姓名：<input type="text" v-model="questionName" class="text border"></p>
                <p class="text-box">电话：<input type="text" v-model="questionPhone" class="text border"></p>
              </div>

            </div>
            <div class="content">
              <div class="questions">
                <ul class="question-box question">
                  <li v-for="(item, index) in previewList" class="question">
                    <p class="topic">
                      {{index + 1}}. {{item.questions}}&nbsp;
                    </p>
                    <el-radio-group v-if="item.typeId === 1" v-model="item.value">
                      <p v-for="radio in item.answer" class="radio">
                        <el-radio :label="radio.label" :key="radio.value">
                      <span class="text">
                        {{radio.value}} &nbsp;
                      </span>
                        </el-radio>
                      </p>
                    </el-radio-group>
                    <el-checkbox-group v-else-if="item.typeId === 2" v-model="item.value">
                      <p v-for="(option, index) in item.answer">
                        <el-checkbox :label="option.value">
                    <span class="text">
                    {{option.value}} &nbsp;
                    </span>
                        </el-checkbox>
                      </p>
                    </el-checkbox-group>
                    <div v-if="item.typeId === 3" class="textarea">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="item.value">
                      </el-input>
                    </div>
                    <div class="NPS-answer" v-else-if="item.typeId === 4">
                      <el-radio-group v-model="item.value">
                        <el-radio-button v-for="radio in item.answer" :label="radio" :key="radio"></el-radio-button>
                      </el-radio-group>
                      <div v-if="item.value !== ''" class="textarea nsp">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 5}"
                          placeholder="请输入内容"
                          v-model="item.suggest">
                        </el-input>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="footer">
              <el-button @click="closePreview()">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </ms-slide>
    <el-scrollbar class="main">
      <div class="questionnaire-box" :style="{height: questionnaireBoxH + 'px'}">
        <div class="side">
          <el-card class="box-card">
            <ul class="question-types-box">
              <li><i class="el-icon-tickets"></i>&nbsp;添加题型</li>
              <li v-for="item in questionTypes" class="types-li" @click="addQuestion(item.id)">
                <div class="default">
                  <i style="text-align: center" class="el-icon-plus"></i>
                  &nbsp;{{item.title}}
                </div>
                <div class="pitch-on"><i style="font-weight: bold; text-align: center" class="el-icon-plus"></i>&nbsp;{{item.title}}</div>
              </li>
            </ul>
          </el-card>
          <el-card class="box-card">
            <ul class="question-bg-box">
              <li><i class="el-icon-picture-outline"></i>&nbsp;设置背景</li>
              <li @click="clear()">
                <i class="el-icon-delete"></i>
                <span>清除背景</span>&nbsp;
              </li>
              <li class="bg-li">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="rest/customer/system/survey-templets/files"
                  :show-file-list="false"
                  :http-request="userDefinedUpload"
                  :file-list="dialogImageUrl"
                  :before-upload="beforeAvatarUpload"
                  list-type="picture">
                  <span>
                    <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过500kb" placement="right">
                    <i class="el-icon-plus"></i>
                    </el-tooltip>
                    &nbsp;上传背景
                  </span>
                </el-upload>
              </li>
              <li :class="['bg-li', item.show? 'bg-li-pitch': '']"
                  v-for="(item, index) in templet.bgList" @click="changesImg(item)">
                <img class="img-small" :src="item.imageAddress" alt="">
                <i v-if="item.imageName === '清除背景'" class="el-icon-delete"></i>
                <span>{{item.imageName}}</span>&nbsp;
                <i v-if="item.title !== '清除背景' && index > 6" class="el-icon-circle-close-outline del-img" @click="delImg(index)"></i>
                <img class="img-big" :src="item.imageAddress" alt="">
              </li>
            </ul>
          </el-card>
        </div>
        <div class="content">
          <el-card class="box-card">
            <div slot="header" class="clearfix title">
            <span v-if="questionTitleShow" class="text" @click="editTitle">
              {{questionTitle}}
              <el-tooltip class="item" effect="dark" content="修改问卷标题" placement="right">
                <i class="title-icon el-icon-edit"></i>
              </el-tooltip>
            </span>
              <span v-if="!questionTitleShow" class="edit-title">
                <input
                  placeholder="示例问卷-标题"
                  v-model="questionTitle"
                  class="title-input"
                  v-focus
                  @blur="editTitle">
                </span>
            </div>
            <div class="explain">
              <span v-if="questionExplainShow" class="text" @click="editExplain">
                {{questionExplain}} &nbsp;
                <el-tooltip class="item" effect="dark" content="修改问卷说明" placement="right">
                <i class="title-icon el-icon-edit"></i>
                </el-tooltip>
              </span>
              <span v-if="!questionExplainShow" class="edit-title">
                <input
                  placeholder="示例问卷-说明"
                  v-model="questionExplain"
                  class="title-input"
                  v-focus
                  @blur="editExplain">
              </span>
              <p class="p-name">姓名：<input v-model="questionName" placeholder="请输入您的姓名"></p>
              <p>电话：<input v-model="questionPhone" placeholder="请输入您的电话"></p>

            </div>
          </el-card>

          <ul class="question-box">
            <li v-for="(item, index) in questionList" class="question">
              <el-card class="question-card">
                <div class="setup-group">
                  <h4>Q{{index + 1}}</h4>
                  <p class="question-icon">
                    <el-tooltip class="item" effect="dark" content="删除项目" placement="right">
                      <i class="el-icon-delete" @click="delItem(index)"></i>
                    </el-tooltip>
                  </p>
                  <p v-if="item.typeId !== 3 && item.typeId !== 4" class="question-icon">
                    <el-tooltip class="item" effect="dark" content="添加选项" placement="right">
                      <i class="el-icon-circle-plus-outline" @click="addAnswer(item)"></i>
                    </el-tooltip>
                  </p>
                  <p v-if="item.typeId !== 3 && item.typeId !== 4" class="question-icon">
                    <el-tooltip class="item" effect="dark" content="减少选项" placement="right">
                      <i class="el-icon-remove-outline" @click="delAnswer(item)"></i>
                    </el-tooltip>
                  </p>
                </div>
                <div class="topic-type-con">
                  <p class="q-title">
                  <span v-if="item.questionsShow" class="text" @click="item.questionsShow = !item.questionsShow">
                    {{item.questions === '' ? '请填写题目' : item.questions}}&nbsp;
                    <el-tooltip class="item" effect="dark" content="修改题目" placement="right">
                      <i class="title-icon el-icon-edit"></i>
                    </el-tooltip>
                  </span>
                    <input v-if="!item.questionsShow" type="text" v-model="item.questions" @blur="item.questionsShow = !item.questionsShow" v-focus>
                  </p>
                  <el-radio-group v-if="item.typeId === 1" v-model="item.value">
                    <p v-for="radio in item.answer" class="radio">
                      <el-radio :label="radio.label" :key="radio.value">
                      <span v-if="radio.show" class="text" @click="radio.show = !radio.show">
                        {{radio.value}} &nbsp;
                        <el-tooltip class="item" effect="dark" content="修改选项" placement="right">
                              <i class="title-icon el-icon-edit"></i>
                        </el-tooltip>
                      </span>
                        <input v-if="!radio.show" type="text" v-model="radio.value" @blur="radio.show = !radio.show" v-focus>
                      </el-radio>
                    </p>
                  </el-radio-group>
                  <el-checkbox-group v-else-if="item.typeId === 2" v-model="item.value">
                    <p v-for="(option, index) in item.answer">
                      <el-checkbox :label="option.value">
                    <span v-if="option.show" class="text" @click="option.show = !option.show">
                    {{option.value}} &nbsp;
                    <el-tooltip class="item" effect="dark" content="修改选项" placement="right">
                    <i class="title-icon el-icon-edit"></i>
                    </el-tooltip>
                    </span>
                        <input v-if="!option.show" type="text" v-model="option.value" @blur="option.show = !option.show" v-focus>
                      </el-checkbox>
                    </p>
                  </el-checkbox-group>
                  <div v-if="item.typeId === 3" class="textarea">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入内容"
                      v-model="item.value">
                    </el-input>
                  </div>
                  <div v-else-if="item.typeId === 4">
                    <el-radio-group v-model="item.value">
                      <el-radio-button v-for="radio in item.answer" :label="radio" :key="radio"></el-radio-button>
                    </el-radio-group>
                    <div v-if="item.value !== ''" class="textarea nsp">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 5}"
                        placeholder="请输入内容"
                        v-model="item.suggest">
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-card>
            </li>
          </ul>
        </div>
        <div class="footer">
          <el-card class="box-card">
            <div slot="header" class="clearfix title">
              <el-select size="small" v-model="TAGListValue" placeholder="请选择">
                <el-option
                  v-for="item in TAGList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              时显示

            </div>
            <div class="explain">
              <span v-if="(TAGListValue === '1' || TAGListValue === '正常完成') && TAGList[0].show" class="text" @click="TAGEdit(TAGList[0])">
                {{TAGList[0].hint === '' ? '您已完成本次问卷，感谢您的帮助与支持' : TAGList[0].hint}}
                <el-tooltip class="item" effect="dark" content="修改结束标题" placement="right">
                  <i class="title-icon el-icon-edit"></i>
                </el-tooltip>
              </span>
              <span v-if="!TAGList[0].show" class="edit-title">
                <input
                  placeholder="正常完成-提示"
                  v-model="TAGList[0].hint"
                  class="title-input"
                  v-focus
                  @blur="TAGEdit(TAGList[0])">
                </span>
              <span v-if="TAGListValue === '2' && TAGList[1].show" class="text" @click="TAGEdit(TAGList[1])">
                {{TAGList[1].hint === '' ? '不好意思，您不太适合本次调查，谢谢您的时间' : TAGList[1].hint}}
                <el-tooltip class="item" effect="dark" content="修改结束标题" placement="right">
                  <i class="title-icon el-icon-edit"></i>
                </el-tooltip>
              </span>
              <span v-if="TAGListValue === '2' && !TAGList[1].show && TAGList[0].show" class="edit-title">
                <input
                  placeholder="正常完成-提示"
                  v-model="TAGList[1].hint"
                  class="title-input"
                  v-focus
                  @blur="TAGEdit(TAGList[1])">
                </span>
            </div>
          </el-card>
        </div>
      </div>
    </el-scrollbar>
    <p class="b-button">
      <el-button size="small" type="primary" @click="previewQuestionnaire">预览问卷</el-button>
      <el-button size="small" type="primary" @click="questionnaireSubmit">生成问卷</el-button>
    </p>
  </div>
</template>

<script>
  import MsSlide from '@/components/common/Slide.vue'
  import Api from '@/api/customer/platform/client-survey'
  import TempletApi from '@/api/customer/customer/survey-templet'
  import FormTokenApi from '@/api/system/form-token'
  import ResponseParse from '@/utils/response-parse'

  const questionTypesList = [{
    id: 0,
    typeId: 1,
    questions: '单选题',
    questionsShow: true,
    answer: [
      {label: 0, value: '选项1', show: true},
      {label: 1, value: '选项2', show: true},
      {label: 2, value: '选项3', show: true}
    ],
    value: ''
  }, {
    id: 1,
    typeId: 2,
    questions: '多选题',
    questionsShow: true,
    answer: [
      {value: '选项1', show: true},
      {value: '选项2', show: true},
      {value: '选项3', show: true}
    ],
    value: []
  }, {
    id: 3,
    typeId: 3,
    questions: '填空题',
    questionsShow: true,
    answer: '',
    value: ''
  }, {
    id: 4,
    typeId: 4,
    questions: 'NSP题',
    questionsShow: true,
    answer: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    value: '',
    suggest: ''
  }]

  export default {
    components: {
      MsSlide
    },
    data () {
      return {
        questionTypes: [{
          id: 0,
          title: '单选题'
        }, {
          id: 1,
          title: '多选题'
        }, {
          id: 2,
          title: '填空题'
        }, {
          id: 3,
          title: 'NPS题'
        }],
        questionList: [{
          id: 0,
          typeId: 1,
          questions: '单选题',
          questionsShow: true,
          answer: [
            {label: 0, value: '选项1', show: true},
            {label: 1, value: '选项2', show: true},
            {label: 2, value: '选项3', show: true}
          ],
          value: ''
        }, {
          id: 1,
          typeId: 2,
          questions: '多选题',
          questionsShow: true,
          answer: [
            {value: '选项1', show: true},
            {value: '选项2', show: true},
            {value: '选项3', show: true}
          ],
          value: []
        }, {
          id: 3,
          typeId: 3,
          questions: '填空题',
          questionsShow: true,
          answer: '',
          value: ''
        }, {
          id: 4,
          typeId: 4,
          questions: 'NSP题',
          questionsShow: true,
          answer: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          value: '',
          suggest: ''
        }],
        questionTitle: '示例问卷-标题',
        questionTitleShow: true,
        questionExplain: '示例问卷-说明',
        questionExplainShow: true,
        questionName: '',
        questionPhone: '',
        previewShow: true,
        previewList: [],
        previewName: '',
        previewPhone: '',
        questionnaireBoxH: document.documentElement.clientHeight - 130,
        previewImg: '',
        templet: {
          bgList: [],
          pagination: {}
        },
        templetId: 0,
        dialogImageUrl: [],
        dialogVisible: false,
        fileList: [],
        TAGList: [{
          value: '1',
          label: '正常完成',
          hint: '您已完成本次问卷，感谢您的帮助与支持',
          show: false
        }, {
          value: '2',
          label: '提前结束(不计入结果)',
          hint: '不好意思，您不太适合本次调查，谢谢您的时间',
          show: false
        }],
        TAGListValue: '正常完成',
        fileForm: {
          imgFile: '',
          token: ''
        }
      }
    },
    created () {
      if (this.$route.query.surveyId !== undefined) {
        Api.get({id: this.$route.query.surveyId}, response => {
          let status = response.status || 0
          let body = response.data || {}
          if (status >= 200 && status <= 204) {
            this.questionTitle = body.map.survey.title
            this.questionExplain = body.map.survey.summary
            if (body.map.templet === undefined) {
            }
            this.previewImg = body.map.templet.imageAddress
            this.questionList = []
            for (let key in body.map.question) {
              let question = {}
              question.questions = key.split('-')[0]
              question.typeId = parseInt(key.split('-')[1])
              question.questionsShow = true
              switch (question.typeId) {
                case 1:
                  question.answer = []
                  let i = 0
                  body.map.question[key].forEach(item => {
                    question.answer.push({label: i++, value: item, show: true})
                  })
                  question.value = ''
                  break
                case 2:
                  question.answer = []
                  body.map.question[key].forEach(item => {
                    question.answer.push({value: item, show: true})
                  })
                  question.value = []
                  break
                case 3:
                  question.answer = ''
                  question.value = ''
                  break
                default:
                  question.answer = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
                  question.value = ''
                  break
              }
              this.questionList.push(question)
            }
          }
        })
      }
      this.addToken()

      const search = Object.assign({}, this.templet.pagination)
      TempletApi.list({search: search}, response => {
        let status = response.status || 0
        let body = response.data || []
        if (status === 200 || status === 204) {
          body.forEach(item => {
            item.show = false
          })
          this.templet.bgList = body
          this.templet.pagination = ResponseParse.pagination(response.headers)
        } else {
          this.templet.list = []
        }
      })
    },
    methods: {
      userDefinedUpload (item) {
        this.fileForm.imgFile = item.file
        this.fileForm.token = this.token
        TempletApi.uploadImg({form: this.fileForm}, response => {
          if (response !== undefined) {
            let status = response.status || 0
            let body = response.data || []
            if (status >= 200 && status <= 204) {
              this.$message.success(body.message || '略缩图上传成功')
              this.addToken()
              this.dialogImageUrl = []
              this.templet.bgList.push({
                imageName: body.imageName,
                show: false,
                imageAddress: body.imageAddress
              })
            } else {
              this.$message.error(body.message || '略缩图上传失败')
            }
          }
        })
      },
      beforeAvatarUpload (file) {
        let format = ['gif', 'jpg', 'jpeg', 'png', 'bmp']
        let index = format.findIndex(suffix => 'image/' + suffix === file.type)
        if (index === -1) {
          this.$message.error('上传头像图片的格式必须为: gif, jpg, jpeg, png, bmp')
          return false
        }
        const isLt2M = file.size / 1024 / 1024 < 1

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
          return false
        }
        return true
      },
      submitUpload () {
        this.$refs.upload.submit()
      },
      addToken () {
        FormTokenApi.create(response => {
          let status = response.status || 0
          let body = response.data || []
          if (status >= 200 && status <= 204) {
            this.token = body.token || ''
          }
        })
      },
      addQuestion (id) {
        let item = JSON.parse(JSON.stringify(questionTypesList[id]))
        item.id = this.questionList.length
        this.questionList.push(item)
      },
      editTitle () {
        this.questionTitleShow = !this.questionTitleShow
        if (this.questionTitle === '') {
          this.questionTitle = '示例问卷-标题'
        }
      },
      TAGEdit (item) {
        item.show = !item.show
      },
      editExplain () {
        this.questionExplainShow = !this.questionExplainShow
        if (this.questionExplain === '') {
          this.questionExplain = '示例问卷-标题'
        }
      },
      delItem (index) {
        this.questionList.splice(index, 1)
      },
      addAnswer (item) {
        if (item.typeId === 1) {
          item.answer.push({label: item.answer.length, value: '选项', show: true})
        } else if (item.typeId === 2) {
          item.answer.push({value: '选项' + (item.answer.length + 1), show: true})
        }
      },
      delAnswer (item) {
        if (item.answer.length > 2) {
          item.answer.pop()
        }
      },
      redactQuestionnaire () {
        this.previewShow = true
      },
      previewQuestionnaire () {
        this.previewName = ''
        this.previewPhone = ''
        this.previewList = JSON.parse(JSON.stringify(this.questionList))
        for (let item of this.previewList) {
          if (item.typeId === 1) {
            item.value = ''
          } else if (item.typeId === 2) {
            item.value = []
          } else if (item.typeId === 3) {
            item.value = ''
          } else if (item.typeId === 4) {
            item.value = ''
            item.suggest = ''
          }
        }
        this.showSlide('slidePreviewQuestionnaire')
      },
      questionnaireSubmit () {
        let form = []
        form.token = this.token
        form.title = this.questionTitle
        form.summary = this.questionExplain
        form.questionNum = this.questionList.length
        form.templetId = this.templetId
        form.questionList = []
        this.questionList.forEach(item => {
          let questionForm = {}
          questionForm = {question: {question: item.questions, typeId: item.typeId}}
          let answerForm = []
          if (item.typeId === 1 || item.typeId === 2) {
            item.answer.forEach(item1 => {
              answerForm.push({answer: item1.value})
            })
          }
          questionForm.answerList = answerForm
          form.questionList.push(questionForm)
        })

        if (this.$route.query.surveyId !== undefined) {
          Api.updateQuestionnaire({id: this.$route.query.surveyId, form: form}, response => {
            let status = response.status || 0
            let body = response.data || []
            if (status >= 200 && status <= 204) {
              this.$message.success('问卷已生成')
            } else {
              this.$message.error(body.error || '问卷生成失败')
            }
          })
        } else {
          Api.addQuestionnaire(form, response => {
            let status = response.status || 0
            let body = response.data || []
            if (status >= 200 && status <= 204) {
              this.$message.success('问卷已生成')
              this.addToken()
            } else {
              this.$message.error(body.error || '问卷生成失败')
            }
          })
        }
      },
      clear () {
        this.previewImg = ''
        this.templetId = 0
      },
      showSlide (ref) {
        this.$refs[ref].show()
      },
      closePreview () {
        this.$refs['slidePreviewQuestionnaire'].close()
      },
      changesImg (item) {
        this.previewImg = item.imageAddress
        this.templetId = item.id
        for (let project of this.templet.bgList) {
          project.show = false
        }
        item.show = true
      },
      delImg (index) {
        TempletApi.delete({id: this.templet.bgList[index].id}, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status >= 200 && status <= 204) {
            this.templet.bgList.splice(index, 1)
            this.$message.success('删除成功')
          } else {
            this.$message.error(body.error || '删除失败')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  ul {
    list-style: none;
  }

  .text:hover {
    .title-icon {
      display: inline-block;
    }
  }

  .text {
    .title-icon {
      display: none;
    }
  }

  .question-icon {
    i {
      display: none;
    }
  }

  .b-button {
    margin-left: 142px;
  }

  .question:hover {
    .question-icon {
      i {
        display: inline-block;
      }
    }
  }

  .ms-list {
    .questionnaire-box {
      .side, .content, .footer {
        display: inline-block;
      }
      .content, .footer {
        width: 800px;
        margin-left: 142px;
        vertical-align: top;
        .box-card, .question-card {
          margin-bottom: 5px;
        }
      }
      .side {
        position: fixed;
        z-index: 10;
        .box-card {
          padding: -20px;
          margin-bottom: 5px;
          .question-types-box, .question-bg-box {
            width: 135px;
            padding: 0px;
            margin: -10px -20px -20px;
            text-align: center;
            li {
              height: 30px;
              line-height: 30px;
              border-bottom: 1px solid #f3f3f3;
            }
            li:last-child {
              border-bottom: none;
            }
            .types-li:hover {
              color: #409EFF;
              .default {
                display: none;
              }
              .pitch-on {
                display: block;
                background-color: #dee9fd;
              }
            }
          }
          .question-types-box {
            li {
              .default {
                display: block;
              }
              .pitch-on {
                display: none;
              }
            }
          }
          .question-bg-box {
            li {
              line-height: 30px;
              vertical-align: middle;
              .img-small {
                width: 15px;
                height: 20px;
                padding: 0 0 3px 0;
                vertical-align: middle;
              }
              .img-big {
                position: absolute;
                display: none;
                width: 200px;
                left: 100%;
                bottom: 0;
              }
              .del-img {
                display: none;
              }
            }
            .bg-li:hover {
              color: #409EFF;
              background-color: #dee9fd;
              .img-big {
                display: block;
              }
              .del-img {
                display: inline-block;
              }
            }
            .bg-li-pitch {
              background-color: #eef1f6;
            }
          }
        }
      }
      .content {
        .box-card {
          .title, .explain {
            .text {
              .title-icon {
                position: absolute;
              }
            }
            .text:hover {
              .title-icon {
                display: inline-block;
              }
            }
          }
          .title {
            margin: -20px;
            text-align: center;
            .text {
              position: relative;
              display: inline-block;
              height: 45px;
              margin-right: -20px;
              padding-right: 20px;
              line-height: 45px;
              .title-icon {
                top: 14px;
                right: 0;
              }
            }
            .edit-title {
              display: inline-block;
              width: 80%;
              input {
                width: 80%;
                height: 37px;
                margin-top: 2px;
                text-align: center;
              }
            }
          }
          .explain {
            padding-left: 5px;
            margin: -20px -20px -20px 30px;
            padding-top: 5px;
            min-height: 90px;
            line-height: 22px;
            font-size: 14px;
            border-left: 1px solid #f3f3f3;
            p {
              margin: 0 0 5px 0;
            }
            .p-name {
              padding-top: 6px;
            }
            .text {
              position: relative;
              display: inline-block;
              line-height: 26px;
              .title-icon {
                top: 5px;
                right: -10px;
              }
            }
            .edit-title {
              input {
                width: 80%;
                margin-top: 4px;
              }
            }
          }
        }
        .question-box {
          margin: 0;
          padding: 0;
          .question {
            .question-card {
              position: relative;
              .setup-group, .topic-type-con {
                display: inline-block;
              }
              .setup-group {
                position: absolute;
                top: -32px;
                left: 0;
                width: 50px;
                padding: 8px 3px;
                text-align: center;
                h4 {
                  padding-top: 14px;
                  margin-bottom: 0px;
                  font-size: 14px;
                }
                p {
                  margin: 0;
                  padding-bottom: 5px;
                }
              }
              .topic-type-con {
                margin: -20px 0 -30px 30px;
                width: 95%;
                min-height: 120px;
                height: 100%;
                padding: 10px 8px;
                border-left: 1px solid #EDF0F0;
                .q-title {
                  margin: 0 0px 5px;
                }
                .radio {
                  height: 22px;
                  line-height: 22px;
                  margin-bottom: 5px;
                }
                .textarea {
                  width: 90%;
                  textarea {
                    width: 80%;
                  }
                }
                .nsp {
                  margin-top: 5px;
                }
              }
            }
          }
        }
      }
      .footer {
        padding-bottom: 20px;
        .title, .explain {
          margin: -20px;
        }
        .title {
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
        .explain {
          height: 50px;
          padding: 5px 0 0 10px;
          .text {
            height: 42px;
            line-height: 42px;
            padding-left: 1px;
          }
          .edit-title {
            input {
              width: 80%;
              height: 40px;
              font-size: 16px;
              line-height: 40px;
            }
          }
        }
      }
    }
  }

  .preview-box {
    .preview-main {
      width: 414px;
      margin: 0 auto;
      overflow: hidden;
      .preview-bg {
        width: 414px;
        position: fixed;
        z-index: -1;
        top: 45px;
        overflow: hidden;
      }
      .exist {
        .content {
          .explain-centent {
            margin: 0;
            line-height: 14px;
          }
          .questions {
            margin-top: -10px;
            .question-box {
              li {
                .text {
                  line-height: 43px;
                }
                .el-radio-group {
                  .el-radio-button__inner {
                    padding: 6px 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  input, textarea {
    outline: none;
    border: none;
    vertical-align: middle;
  }

  input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  textarea {
    resize: none;
  }

  input:focus, textarea:focus {
    border: 1px solid #51A2E4 !important;
  }

  .preview-main {
    width: 100%;
    height: 100%;
    header {
      width: auto;
      background-color: rgba(255, 255, 255, 0.95);
      border: solid 2px #d62822;
      margin: 15px 10px;
      padding: 0px 10px 5px;
      box-shadow: 0 0 5px #cccccc;
      text-align: center;
      .title {
        position: relative;
        display: inline-block;
        font: normal bold 22px / 55px arial, verdana;
      }
    }
    .content {
      p {
        margin: 0;
      }
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 5px #cccccc;
      margin: 10px 10px;
      padding: 30px 10px;
      font-size: 14px;
      .explain {
        font-size: 16px;
      }
      .container {
        margin: 5px 0;
        .text-box {
          padding-top: 10px;
          .text {
            padding: 0 8px;
          }
          .border {
            display: inline-block;
            width: 80%;
            border: 1px solid #d5d5d5;
          }
          input {
            height: 28px;
          }
        }
      }
      .explain-centent {
        display: inline-block;
        position: relative;
      }
      .explain-centent::before {
        position: absolute;
        content: '';
        bottom: -6px;
        width: 100%;
        height: 3px;
        background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%);
        background: linear-gradient(135deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%);
        background-size: 6px 6px;
        background-repeat: repeat-x, repeat-x;
      }
      .questions {
        .question {
          padding: 0;
          margin: 0;
          .topic {
            margin-top: 10px;
          }
        }
      }
    }
    .footer {
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 5px #cccccc;
      margin: 10px 10px;
      button {
        width: 100%;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, .5);
      }
      button::after {
        font-size: 18px;
        border: 1PX solid #666666;
      }
    }
  }
</style>
<style lang="scss">
  .preview-box {
    .preview-main {
      .exist {
        .content {
          .questions {
            .question-box {
              li {
                .NPS-answer {
                  .el-radio-group {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    .el-radio-button {
                      width: 100%;
                      .el-radio-button__inner {
                        width: 100%;
                        padding: 6px 0;
                        text-align: center;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>


